<template>
  <div class="demo-pagination-block">
    <el-pagination
        v-model:currentPage="pageInfo.currentPage"
        :page-size="pageInfo.pageSize"
        layout="prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
  </div>
</template>

<script lang="ts">
export default {
  name: "Page",
  props: {
    pageInfo: {
      default: {
        // 当前页
        currentPage: 1,
        // 每页的数量
        pageSize: 10,
        // 总条目数
        total: 100
      }
    }
  },
  setup(props: any, ctx: any) {

    const handleSizeChange = (index: number) => {
      handleCurrentChange(index)
    }

    const handleCurrentChange = (index: number) => {
      ctx.emit("handleCurrentChange", index)
    }

    return {
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-pagination-block {
  margin: 20px auto;
  text-align: center;
}
</style>